<template>
  <div class="content">
    <app-bar type="heroe" :data="heroe" back title="武将详情"></app-bar>
    <div class="details" v-if="heroe">
      <div class="heroe">
        <div class="image">
          <img v-if="heroe.image" :src="heroe.image" alt="" />
          <img v-else class="noimg" src="../../assets/noimg.png" alt="" />
        </div>
        <div class="desc">
          <div class="info">
            <div
              class="enlist"
              @click.stop="enlistHeroe"
              :class="{ active: enlist }"
            >
              <!-- {{ enlist ? "已招募" : "未招募" }} -->
              <template v-if="enlist">
                <span>已</span><span>招</span><span>募</span>
              </template>
              <template v-else>
                <span>未</span><span>招</span><span>募</span></template
              >
            </div>
            <div class="name">
              {{ heroe.name }}
              <div class="country" :type="heroe.country">
                <img
                  v-if="heroe.country === 1"
                  src="../../assets/wei.svg"
                  alt=""
                />
                <img
                  v-if="heroe.country === 2"
                  src="../../assets/shu.svg"
                  alt=""
                />
                <img
                  v-if="heroe.country === 3"
                  src="../../assets/wu.svg"
                  alt=""
                />
                <img
                  v-if="heroe.country === 4"
                  src="../../assets/qun.svg"
                  alt=""
                />
              </div>
            </div>
            <div class="control">统御：{{ heroe.control }}</div>
          </div>
          <div class="score">
            <div class="item" :type="heroe.cavalryLevel">
              <img src="../../assets/qi.svg" alt="" />
              <span>骑{{ heroe.cavalryLevel }}</span>
            </div>
            <div class="item" :type="heroe.maulerLevel">
              <img src="../../assets/dun.svg" alt="" /><span
                >盾{{ heroe.maulerLevel }}</span
              >
            </div>
            <div class="item" :type="heroe.archerLevel">
              <img src="../../assets/gong.svg" alt="" /><span
                >弓{{ heroe.archerLevel }}</span
              >
            </div>
            <div class="item" :type="heroe.pikemanLevel">
              <img src="../../assets/qiang.svg" alt="" /><span
                >枪{{ heroe.pikemanLevel }}</span
              >
            </div>
            <div class="item" :type="heroe.weaponLevel">
              <img src="../../assets/qixie.svg" alt="" /><span
                >器{{ heroe.weaponLevel }}</span
              >
            </div>
          </div>
          <div class="level">
            等级：<van-stepper :max="50" class="stepper" v-model="level" />
          </div>
        </div>
      </div>
      <div class="radar">
        <div class="item">
          <b>
            {{ setNumber(heroe.force, heroe.force_grow) }}
          </b>
          <span> 武力（+{{ heroe.force_grow / 100 }}） </span>
        </div>
        <div class="box">
          <div class="num">
            <div class="item top">
              <b> {{ setNumber(heroe.charm, heroe.charm_grow) }}</b>
              <span> 魅力（+{{ heroe.charm_grow / 100 }}） </span>
            </div>
            <div class="item">
              <b>
                {{ setNumber(heroe.statecraft, heroe.statecraft_grow) }}
              </b>
              <span> 政治（+{{ heroe.statecraft_grow / 100 }}） </span>
            </div>
          </div>
          <radar-img
            :score="{
              A: heroe.force / 100,
              B: heroe.command / 100,
              C: heroe.intelligence / 100,
              D: heroe.speed / 100,
              E: heroe.statecraft / 100,
              F: heroe.charm / 100,
            }"
          />
          <div class="num">
            <div class="item top">
              <b>
                {{ setNumber(heroe.command, heroe.command_grow) }}
              </b>
              <span> 统率（+{{ heroe.command_grow / 100 }}） </span>
            </div>
            <div class="item">
              <b>
                {{ setNumber(heroe.intelligence, heroe.intelligence_grow) }}
              </b>
              <span> 智力（+{{ heroe.intelligence_grow / 100 }}） </span>
            </div>
          </div>
        </div>
        <div class="item">
          <b>
            {{ setNumber(heroe.speed, heroe.speed_grow) }}
          </b>
          <span> 速度（+{{ heroe.speed_grow / 100 }}） </span>
        </div>
      </div>
      <div class="born-tactic" v-if="heroe.born_tactic_ids.length">
        <Title style="margin: 0.25rem 0 0.13rem" title="自带战法"></Title>
        <tactic-box
          :tacticId="id"
          v-for="(id, i) in heroe.born_tactic_ids"
          :key="'0' + i"
        ></tactic-box>
      </div>

      <div class="inherit-tactic" v-if="heroe.inherit_tactic_ids.length">
        <Title style="margin: 0.25rem 0 0.13rem" title="传承战法"></Title>
        <tactic-box
          :tacticId="id"
          heroe
          v-for="(id, i) in heroe.inherit_tactic_ids"
          :key="'1' + i"
        ></tactic-box>
      </div>

      <div class="recommend-tactic" v-if="recommendTactic.length">
        <Title style="margin: 0.3rem 0 0.12rem" title="推荐战法"></Title>
        <div class="typeItem">
          <div
            class="item"
            @click="openTactic(tactic)"
            v-for="(tactic, i) in recommendTactic"
            :key="'2' + i"
          >
            {{ tactic.name }}
          </div>
        </div>
      </div>

      <div class="recommend-book" v-if="recommendBooks.length">
        <Title style="margin: 0.3rem 0 0.12rem" title="推荐兵书"></Title>
        <div class="typeItem">
          <div
            class="item"
            @click="openBook(book)"
            v-for="(book, i) in recommendBooks"
            :key="'3' + i"
          >
            {{ book.name }}
          </div>
        </div>
      </div>

      <div class="recommend-forms" v-if="recommendForms.length">
        <Title style="margin: 0.16rem 0 0.12rem" title="推荐阵容"></Title>
        <div style="height: 0.16rem"></div>
        <team-box
          :forms="forms"
          :heroe="heroe"
          v-for="(forms, i) in recommendForms"
          :key="'4' + i"
        ></team-box>
      </div>

      <div class="heroe-fate" v-if="heroeFates.length">
        <Title style="margin: 0.25rem 0 0.02rem" title="武将缘分"></Title>
        <heroe-fate
          :fates="fates"
          v-for="(fates, i) in heroeFates"
          :key="'5' + i"
        ></heroe-fate>
      </div>

      <Title style="margin: 0.25rem 0 0.12rem" title="列传"></Title>
      <div class="record">
        <p>{{ heroe.intro }}</p>
        <p>
          <img src="../../assets/yan.svg" alt="" />
          {{ heroe.story }}
        </p>
        <p>
          <img src="../../assets/shi.svg" alt="" />
          {{ heroe.history }}
        </p>
      </div>
      <vivo-down></vivo-down>
    </div>
    <div class="loading" v-else>
      <van-loading color="#1989fa" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import api from "@/api";
import RadarImg from "@/components/RadarImg/RadarImg.vue";
import Title from "@/components/Title/Title.vue";
import TacticBox from "@/components/TacticBox/TacticBox.vue";
import TeamBox from "@/components/TeamBox/TeamBox.vue";
import HeroeFate from "@/components/HeroeFate/HeroeFate.vue";
export default {
  name: "HeroeDetails",
  components: {
    RadarImg,
    TacticBox,
    TeamBox,
    HeroeFate,
    Title,
  },
  data() {
    return {
      heroe: null,
      heroeFates: [],
      recommendTactic: [], // 推荐战法
      recommendBooks: [], // 推荐兵书
      recommendForms: [], // 推荐阵形
      level: 1,
    };
  },
  watch: {
    alldataLoading() {
      this.getData();
    },
    "$route.params.id"() {
      this.$nextTick(() => {
        this.scroll.scrollTo({ y: 0 }, 0);
      });
    },
  },
  computed: {
    ...mapState("data", ["userHeroes", "alldataLoading"]),
    enlist() {
      let enlist = this.userHeroes.indexOf(this.heroe.id) !== -1;
      return enlist;
    },
  },
  async created() {
    if (!this.alldataLoading) await this.getData();
    window.injectedAll.sendUv("三国志.战略版图鉴");
  },
  activated() {
    if (this.heroe) {
      window.shareData = JSON.parse(JSON.stringify(this.heroe));
      window.injectedAll.shareInit("heroe");
    }
  },
  methods: {
    async getData() {
      let id = parseInt(this.$route.params.id);
      this.heroe = await this.$store.dispatch("data/getHeroe", id);

      window.shareData = JSON.parse(JSON.stringify(this.heroe));
      window.injectedAll.shareInit("heroe");
      // 获取武将缘分
      try {
        this.heroeFates = await api.GET_HEROE_FATES(this.heroe.sp_for || id);
        this.recommendForms = await api.GET_HEROE_RECOMMEND_FORMS(id);
        if (this.recommendForms[0]) {
          this.recommendForms = [this.recommendForms[0]];
        }
      } catch (err) {
        console.log(err);
      }

      // // 获取武将自带战法
      // let bbb = this.heroe.getHeroeTactic();

      // 推荐战法
      this.recommendTactic = this.heroe.getRecommendTactic();

      // 推荐兵书
      this.recommendBooks = this.heroe.getRecommendBook();

      this.$nextTick(() => {
        this.scroll.scrollTo({ y: 0 }, 0);
      });
    },
    setNumber(base, offset) {
      let num = base + offset * (this.level - 1);
      if (num % 100 === 0) {
        return num / 100;
      } else {
        return (num / 100).toFixed(2);
      }
    },
    toPage() {
      this.$router.push("/heroe/9");
    },
    openTactic(tactic) {
      this.Popups.Tactic().show(tactic, (path) => {
        this.$router.push(path);
      });
    },
    openBook(book) {
      this.Popups.Book().show(book);
    },
    enlistHeroe() {
      this.$store.dispatch("data/setUserHeroe", this.heroe.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100%;
  padding-top: 0.46rem;
  .details {
    padding: 0.02rem 0.16rem;
    ::v-deep {
      .tactic-box {
        .name-box {
          padding-left: 0;
        }
      }
    }
    .heroe {
      display: flex;
      .image {
        width: 0.9rem;
        height: 1.278rem;
        margin-right: 0.13rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f2f2f2;
        border-radius: 0.04rem;
        font-size: 0;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          // border-radius: 0.04rem;
          &.noimg {
            width: 24px;
            height: 24px;
          }
        }
      }
      .desc {
        flex: 1;
        width: 0;
        .info {
          margin-top: 0.03rem;
          width: 100%;
          .name {
            font-size: 0.16rem;
            color: #333333;
            line-height: 0.22rem;
            display: flex;
            align-items: center;
            .country {
              margin-left: 0.07rem;
              height: 0.16rem;
              img {
                width: 0.16rem;
                height: 0.16rem;
              }
            }
          }
          .control {
            margin-top: 0.02rem;
            font-size: 0.14rem;
            color: #8b8b8b;
            line-height: 0.2rem;
          }
          .enlist {
            float: right;
            width: 0.28rem;
            height: 0.48rem;
            padding: 0;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #ebebeb;
            text-align: center;
            color: #8c8c8c;
            box-sizing: border-box;
            font-size: 0.12rem;
            line-height: 1.2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            &.active {
              background: #ff8a69;
              border: 1px solid #ff8a69;
              color: #fff;
            }
          }
        }
        .score {
          margin-top: 0.13rem;
          display: flex;
          .item {
            margin-right: 0.04rem;
            flex: 1;
            height: 0.2rem;
            background: #f6a16e;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 10px;
            }
            &[type="S"] {
              background: #f6a16e;
            }
            &[type="A"] {
              background: #c483c0;
            }
            &[type="B"] {
              background: #81a0cf;
            }
            &[type="C"] {
              background: #96bfa3;
            }
            span {
              font-size: 0.12rem;
              color: #fff;
              transform: scale(0.9);
            }
          }
        }
        .level {
          margin-top: 0.19rem;
          display: flex;
          align-items: center;
          font-size: 0.14rem;
          color: #8c8c8c;
          .stepper {
            ::v-deep {
              button {
                width: 0.24rem !important;
                height: 0.24rem !important;
                background: #f2f2f2 !important;
                border-radius: 4px !important;
                font-size: 10px;
              }
              input {
                margin: 0 0.05rem;
                width: 0.4rem;
                height: 0.24rem;
                border-radius: 4px;
                border: 1px solid #ebebeb;
                background: #fff;
              }
            }
          }
        }
      }
    }
    .radar {
      margin-top: 0.19rem;
      .item {
        width: 0.8rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        b {
          font-size: 0.14rem;
          color: #333333;
          line-height: 0.2rem;
        }
        span {
          font-size: 0.12rem;
          color: #8d8d8d;
          line-height: 0.14rem;
          white-space: nowrap;
        }
      }
      .box {
        padding: 0.05rem 0;
        display: flex;
        justify-content: center;
        .num {
          .item {
            margin-top: 0.53rem;
          }
          .top {
            margin-top: 0.23rem;
          }
        }
      }
    }
    .typeItem {
      margin-left: -0.1rem;
      .item {
        width: calc(25% - 0.1rem);
        margin-left: 0.1rem;
        margin-bottom: 0.1rem;
        display: inline-block;
        height: 0.28rem;
        background: #f2f2f2;
        border-radius: 0.04rem;
        font-size: 0.12rem;
        color: #333333;
        line-height: 0.28rem;
        text-align: center;
      }
    }
    .record {
      background: #f2f2f2;
      border-radius: 0.05rem;
      padding: 0.05rem 0.1rem;
      margin-bottom: 0.11rem;
      p {
        margin: 0.05rem;
        font-size: 0.14rem;
        color: #333333;
        line-height: 0.24rem;
        text-align: justify;
        img {
          width: 0.2rem;
          height: 0.2rem;
          vertical-align: middle;
          position: relative;
          top: -0.01rem;
        }
      }
    }
  }
  .loading {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
